<template>

    <div class='container'
     v-loading.fullscreen.lock="fullscreenLoading"
     element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"> 
        <section class="container">
            <HSearchForm 
            @searchData='handleSearch'
            :locationList='locationList'
            :isload='isload'/>
            <HFilter @filter='handleFilter'/>
            <HInfo 
            :hotelItem='item'
            v-for ='(item,index) in hotelList'
            :key='index'
            
            :id='item.id'
            v-loading="isload"
            />
            <h4 class='disappointed' 
            v-if='hotelList.length==0'
            v-loading="isload"
            >暂无符合条件的酒店</h4>
            
  <div class="pagechange">
       <el-pagination
    layout="prev, pager, next"
    :total="total"
    :current-page="pageIndex"
    :page-size="pageSize"
    @current-change="currentChange"
    >
  </el-pagination>
  </div>
 
        </section>
        
    </div>

</template>
<script>
export default {
    data(){
        return{
            searchForm:{
                city:'197'
            },
            filterForm:{
                price_lt:4000,
                hotellevel_in:[],
                hoteltype_in:[]
            },
            hotelList:[],
            pageSize:8,
            pageIndex:1,
            total:0,
            locationList:[],
            isload:true,
            fullscreenLoading: false
        }
    },
    created(){
         this.openFullScreen1()
         
    },
    methods:{
        open1() {
        this.$notify({
          title: '城市',
          message: '定位当前城市:广州市',
          type: 'success'
        });
      },
        openFullScreen1() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
          this.open1()
        }, 2000);
      },
        handleSearch(value){
            this.searchForm=value
            this.request()
        },
        handleFilter(value){
            this.filterForm=value
            this.request()
        },
        request(){

            if(!this.searchForm || !this.filterForm){
                return
            }
            this.isload=true
        const data={...this.searchForm,...this.filterForm}
        const start= (this.pageIndex-1) * this.pageSize
        // const {city}=this.searchForm
        // const {price_it,hotellevel_in,hoteltype_in}=this.filterForm
        // let levelstr=''
        // let typestr=''
        // hotellevel_in.forEach(value=>{
        //      levelstr+=`hotellevel_in=${value}&`
        //     return levelstr
        // })
        // hoteltype_in.forEach(value=>{
        //     typestr+=`hoteltype_in=${value}&`
        //     return typestr
        // })

        var keys = Object.keys(data); 
        var str = "";
        keys.forEach(v => {
            if(Array.isArray(data[v])){
                // data[v] => [1,2]
                data[v].forEach(item => {
                    str += `${v}=${item}&`;
                })
            }else{
                str += `${v}=${data[v]}&`;
            }
        })
        console.log(str)
            this.$axios({ 
            url: `/hotels?_start=${start}&_limit=${this.pageSize}&${str}`,
            }).then(res=>{ 
                console.log(1,res.data.data);
                this.hotelList=res.data.data
                this.total=res.data.total
                this.locationList=[]
               this.hotelList.forEach(value=>{ 
                   this.locationList.push({...value.location,name:value.name})
                })
                console.log(this.locationList);
                this.isload=false
            })       
        },
        currentChange(newPageIndex) {
                this.pageIndex = newPageIndex;
                this.request()
            },
    }
}
</script>

<style lang="less" scoped>
.container {
        width: 1000px;
        margin: 20px auto;
        
        padding:0 10px;
        .pagechange{
        padding-top: 20px;
        display: flex;
         justify-content: right;
    
        }
        .disappointed{
            text-align: center;
            padding-top: 20px;
            margin-top: 10px;
        }
    }
</style>